<template>
	<div class="moni" style="background: #F7F7F7;">
		<mt-header fixed>
			<div slot="left">
				<mt-button @click="back()" icon="back"></mt-button>        
			</div>
			<mt-button slot="right" @click="guize">规则</mt-button>
		</mt-header>
		<div class="klineContainer">
		  <div class="tab_content">
		    <ul>
		      <li :class="{ 'active': isA, ' ': isB}" data-t="1" @click="xiadan">模拟下单</li>
		      <li :class="{ '': isA, 'active': isB}" data-t="2" @click="chichang">模拟持仓</li>
		    </ul>
		  </div>
		  <div class="content">
			  <!-- 下单 -->
			<div class="tab selected data-type-1" v-if="buystocks==true">
			    <div class="kline_top bgcolor">
			    </div>
				<div class="kline_tab">
					<!-- 分时日线盘口头部 -->
					<div class="tab_content1">
						<ul class="tabs" style="min-width: 800px;">
						  <li :class="isC == '0'?'active1':' '" @click="one">分时</li>
						  <li :class="isC == '1'?'active1':' '" @click="there">3分钟</li>
						  <li :class="isC == '2'?'active1':' '" @click="fifteen">15分钟</li>
						  <li :class="isC == '3'?'active1':' '" @click="thirty">30分钟</li>
						  <li :class="isC == '4'?'active1':' '" @click="hour">1小时</li>
						  <li :class="isC == '5'?'active1':' '" @click="rixian">日线</li>
						</ul>
					</div>
				</div>
				<div id="main" style="width:100%;height:420px;">
				  <div class="loding">数据正在加载 请稍后...</div>
				</div>
			</div>
			<!-- 持仓 -->
			<div class="tab selected2 data-type-2" v-if="buystocks==false">
				<div class="tab_content2" style="margin-top: 80px;">
				  <ul class="tabs">
				    <li :class="isD == '0'?'active1':' '" @click="cang">持仓</li>
				    <li :class="isD == '1'?'active1':' '" @click="jiesuan">结算</li>
				    <li :class="isD == '2'?'active1':' '" @click="liudan">流单</li>
				  </ul>
				</div>
				<!-- 持仓 -->
				<div class="tab1" v-if="isD=='0'">
					<positionpage></positionpage>
				</div>
				<!-- 结算 -->
				<div class="tab1" v-if="isD=='1'">结算</div>
				<!-- 流单 -->
				<div class="tab1" v-if="isD=='2'">流单</div>
			</div>
		  </div>
		  <div style="width: 100%;height: 2.5rem;position: fixed;background: #efefef;bottom: 0;" v-if="buystocks==true">
		    <div class="kline_bottom">
		  		<div class="kline_text">
		  			<div class="up_buy" style="color:#B3262C;">11</div>
		  			<div class="buy_num">买卖量</div>
		  			<div class="down_buy" style="color:#1b795f;">16</div>
		  		</div>
		  		<div class="bottom_btn">
		  			<div class="kline_up" style="background-color:#B3262C;"><div class="kline_img"><img src="../../assets/shang.png" alt=""></div>买涨<span>58.86</span></div>
		  			<!-- <div class="kline_buy" @click="onekey()">
		  			  <p style="margin-top: 13px;">一键</p>
		  			  <p>下单</p>
		  			</div> -->
		  			<div class="kline_down" style="background-color:#1b795f;"><div class="kline_img"><img src="../../assets/xia.png" alt=""></div>买跌<span>58.89</span></div>
		  		</div>
		    </div>
		  </div>
		</div>
	</div>
</template>

<script>
	
	export default {
	    name: "demo",
	    data() {
	        return {
				symbol: "CFFEXIC1906",
				isloding: true,
				products:[],
				item: {
				   
				},
				selectItem: {},
				kline: {},
				data0: [],
				// product_item: {},
				popupVisible: true,
				popupVisible4: false,
				buystocks: true, //控制tab选项卡显示
				isA: true, //当isA改变时，将class更新
				isB: false, //当isB改变时，将class更新
				isC: "0" ,//当isC改变时，将class更新
				isD:"0",//当isD改变时，将class更新
	        };
	    },
	    mounted() {
	        
	    },
		methods:{
			back(){
			    this.$router.go(-1)
			},
			guize(){
				this.$router.push({ path:'guize'})
			},
			cang(){
				let thisx = this;
				thisx.isD = "0";
			},
			jiesuan(){
				let thisx = this;
				thisx.isD = "1";
			},
			liudan(){
				let thisx = this;
				thisx.isD = "2";
			},
			xiadan() {
			  var thisx = this;
			  thisx.buystocks = true;
			  thisx.isA = true;
			  thisx.isB = false;
			},
			chichang() {
			  var thisx = this;
			  thisx.buystocks = false;
			  thisx.isA = false;
			  thisx.isB = true;
			},
			one() {
			  var that = this;
			  that.isC = "0";
			},
			hour() {
			  //1小时
			  var that = this;
			  that.isC = "4";
			},
			// 30分钟
			thirty() {
			  var that = this;
			  that.isC = "3";
			},
			rixian() {
			  //日线
			  var that = this;
			  that.isC = "5";
			},
			week() {
			  //周线
			  var that = this;
			  that.isC = "6";
			},
			// 3分钟
			there() {
			  var that = this;
			  that.isC = "1";
			},
			fifteen() {
			  //15分钟
			  var that = this;
			  that.isC = "2";
			},
		}
	};
</script>

<style scoped>
	#myChart {
	  width: 70%;
	  height: 500px;
	  margin: 0 auto;
	}
	ul,
	li {
	  padding: 0;
	  margin: 0;
	  list-style: none;
	}
	#chart_updated_time {
	  display: none;
	}
	.klineContainer {
	  margin-top: 80px;
	}
	#chart_toolbar {
	  /* display: none; */
	}
	.mint-popup-4 {
	  width: 750px;
	  height: 180px;
	}
	.popup_top {
	  width: 750px;
	  height: 90px;
	  border: #f4f4f4 solid 1px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 28px;
	  color: #333333;
	}
	
	.tab_content {
	  position: fixed;
	  top: 1.3%;
	  left: 28%;
	  border: 2px solid #fff;
	  border-radius: 35px;
	  z-index: 100;
	}
	.content {
	  /* position: fixed;
	  top: 0px; */
	  margin-top: 80px;
	  width: 100%;
	  height: 800px;
	  /* background: #00A2E8; */
	}
	.tab_content li {
	  width: 160px;
	  height: 45px;
	  color: #fff;
	  letter-spacing: 5px;
	  line-height: 45px;
	  text-align: center;
	  float: left;
	}
	.bgcolor{
		background: #B3262C !important;
	}
	.bgcolor1{
		background: #1c795f !important;
	}
	.tab_content .active {
	  background-color: #fff;
	  color: #000;
		border-radius: 35px;
	}
	
	.kline_bottom {
	  width: 100%;
	  height: 180px;
	  position: fixed;
	  bottom: 0px;
	  left: 0;
	  background: #efefef;
	}
	.kline_bottom .kline_text{
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-around;
		/* padding: 0 1rem; */
		/* justify-content: center; */
	}
	.bottom_btn{
		width: 100%;
		height: 140px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.bottom_btn .kline_img{
			width: 50px;
	    height: 50px;
	    float: left;
	    overflow: hidden;
			margin:14px 5px;
	}
	.bottom_btn .kline_img img{
		width: 100%;
	}
	.bottom_btn .kline_up,
	.bottom_btn .kline_down {
	  color: #fff;
	  text-align: center;
	  width: 40%;
	  height: 75px;
	  background: #bebebe;
	  font-size: 35px;
	  line-height: 75px;
	  border-radius: 10px;
	  /* margin-top: 50px; */
	  border: 1px solid #bbbbbb;
	}
	.kline_top {
	  width: 100%;
	  height: 150px;
	  overflow: hidden;
	  background: #fff;
	  box-sizing: border-box;
	}
	.kline_top .top_left {
	  width: 45%;
	  height: 100%;
	  float: left;
	  font-size: 25px;
	}
	.kline_top .top_left .kline_name {
	  margin-top: 20px;
	  text-align: center;
		display: flex;
		justify-content: center;
	}
	.kline_top .top_right {
	  width: 55%;
	  height: 100%;
	  float: left;
	  /* margin-top: .2rem; */
		color: #fff;
	}
	
	.kline_top .top_right .right_price{
		width: 180px;
		font-size: 55px;
		/* text-align: left; */
		padding-left: 20px;
		box-sizing: border-box;
	}
	.kline_top .top_right .right_num{
		box-sizing: border-box;
		width: 180px;
	}
	.kline_top .top_right .right_num div{
		font-size: 16px;
		float: left;
		/* display: flex;
		justify-content: space-around; */
	}
	.kline_top .top_right .right_num div:last-child{
		float: right;
	}
	
	.kline_bottom {
	  width: 100%;
	  height: 180px;
	  position: fixed;
	  bottom: 0px;
	  background: #efefef;
	}
	.kline_top .top_left {
	  width: 45%;
	  height: 100%;
	  float: left;
	  font-size: 25px;
	}
	.kline_top .top_left .kline_name {
	  margin-top: .2rem;
	  text-align: center;
	  padding: 5px;
	}
	.kline_top .top_left .kline_num span {
	  width: 50%;
	  height: 50%;
	  display: block;
	  float: left;
	  text-align: center;
	  color: #1aa034;
	  padding: 5px;
	  box-sizing: border-box;
	}
	.kline_top .top_right {
	  width: 55%;
	  height: 100%;
	  float: left;
	}
	.selected2 {
	  margin-top: -80px;
	}
	.tab_content1 {
	  width: 100%;
	  height: 75px;
	  padding: 15px 8%;
	  box-sizing: border-box;
	  margin-top: 5px;
	  border-top: 1px solid #efefef;
		overflow-x: scroll;overflow-y:hidden;
		display: flex;align-items: center;
	}
	.tab_content1::-webkit-scrollbar {
	  display: none;
	}
	.tab_content1 li {
	  width: 11%;
	  height: 70px;
	  letter-spacing: 5px;
	  line-height: 70px;
	  text-align: center;
	  float: left;
	}
	.tab_content1 .active1 {
	  color: #B3262C;
	  border-bottom: 5px solid #B3262C;
	}
	.tab_content2 {
	  width: 100%;
	  height: 75px;
	  padding: 15px 8%;
	  box-sizing: border-box;
	  margin-top: 5px;
	  border-top: 1px solid #efefef;
		
	}
	.tab_content2::-webkit-scrollbar {
	  display: none;
	}
	.tab_content2 .tabs{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.tab_content2 .tabs li {
		overflow: hidden;
	  width: 25%;
	  height: 70px;
	  letter-spacing: 5px;
	  line-height: 70px;
	  text-align: center;
	  /* float: left; */
	}
	.tab_content2 .active1 {
	  color: #B3262C;
	  border-bottom: 5px solid #B3262C;
	}
	.kline_tab .tab1 {
	  width: 100%;
	  border-top: 1px solid #efefef;
	}
	
	.loding {
	  width: 100%;
	  height: 420px;
	  background: #fff;
	  display: flex;
	  justify-content: center;
	  letter-spacing: 1px;
	  font-size: 20px;
	  color: #666;
	  line-height: 200px;
	}
	.kline_open{
	  font-size: .45rem;
	}
</style>
